import {defineComponent, ref,} from "vue";
// import Draggable from '@/vuedraggable';
import Draggable from 'vuedraggable-es'
import RawDisplayer from "./rawDisplayer"

export default defineComponent({
    name: "custom-clone",
    setup() {
        let list1 = ref([
            {name: "dog 1", id: 1},
            {name: "dog 2", id: 2},
            {name: "dog 3", id: 3},
            {name: "dog 4", id: 4}
        ])
        let list2 = ref([
            {name: "cat 5", id: 5},
            {name: "cat 6", id: 6},
            {name: "cat 7", id: 7}
        ])
        let list3 = ref([
            {name: "pig 11", id: 11},
            {name: "pig 12", id: 12},
            {name: "pig 13", id: 13}
        ])
        const draggableOptions = {
            group: {pull: "clone"}
        }
        const group1 = {name: "list", pull: false, put: true}
        const group2 = {name: "list", pull: "clone", put: false}
        const group3 = {name: "list", pull: "clone", put: false}
        const cloneDog = (row: any) => {
            console.log("触发克隆函数1")
            return row
        }
        const onStart = () => {

        }
        // 阻止火狐浏览器的拖拽导致打开百度搜索的bug
        const onEnd = () => {
            document.body.ondrop = (event: any) => {
                event.preventDefault();
                event.stopPropagation();
            }
        }
        const slots = {
            item: (canshu: any) => {
                return <div
                    class="border border-blue-200 border-opacity-0 hover:border-opacity-100 cursor-move">{canshu.element.name}</div>
            }
        }
        const onMove = (e: any, originalEvent: any) => {
            const moveName = e.relatedContext.element.name;
            // 名字带cat的，不允许停靠  https://www.itxst.com/vue-draggable/ufjv2i7j.html
            return moveName.indexOf("cat") === -1;

        }
        return () => (<div class="flex w-full h-full">
            <div class="w-1/4 h-full border border-black">
                <h3>Draggable 1</h3>
                <Draggable
                    class="dragArea list-group"
                    list={list1.value}
                    clone={cloneDog}
                    onStart={onStart}
                    onEnd={onEnd}
                    v-slots={slots}
                    item-key={"name"}
                    group={group1}
                    move={onMove}
                >
                </Draggable>
            </div>

            <div class="w-1/4 h-full border border-black">
                <h3>Draggable 2</h3>
                <Draggable
                    class="dragArea list-group"
                    list={list2.value}
                    v-slots={slots}
                    onStart={onStart}
                    clone={cloneDog}
                    onEnd={onEnd}
                    item-key={"name"}
                    group={group2}
                    move={onMove}
                >
                </Draggable>
            </div>
            <div class="w-1/4 h-full border border-black">
                <h3>Draggable 3</h3>
                <Draggable
                    class="dragArea list-group"
                    list={list3.value}
                    v-slots={slots}
                    onStart={onStart}
                    clone={cloneDog}
                    onEnd={onEnd}
                    item-key={"name"}
                    group={group3}
                >
                </Draggable>
            </div>
        </div>)
    },
})
